<template>
  <el-header class="frontIndex">
    <el-row justify="center">
      <el-col class="header-row" :span="16" :xs="24">
        <!-- header-logo -->
        <div
          :class="userInfo.userId > 0 ? 'hidden-sm-and-down' : ''"
          class="header-logo"
          @click="router.push({ name: 'Home' })"
        >
          <!-- <img
            style="width: 45px; height: 45px; border-radius: 50%"
            src="@/assets/zhongwu.png"
            alt="logo"
          /> -->
          <span
            class="hidden-xs-only"
            style="font-family: FangSong; font-weight: 600; font-size: 1.5rem"
          ></span>
        </div>
        <!-- 用户已登录用户中心的首页展示 暂时表示已登录 -->
        <div
          v-if="userInfo.userId"
          @click="memberCenter.toggleMenuExpand(true)"
          class="user-menus-expand hidden-md-and-up"
        >
          <Menu
            :class="menuColor"
            style="width: 1.3em; height: 1.3em; margin-right: 8px"
          />
        </div>
        <!-- 菜单路由 -->
        <el-menu
          :default-active="state.activeMenu"
          class="frontend-header-menu"
          mode="horizontal"
          @select="handleSelect"
          :ellipsis="false"
        >
          <!-- <el-menu-item @click="router.push({ name: 'Home' })" v-blur index="/"
            >首页
          </el-menu-item> -->
          <template v-if="memberCenter.state.open">
            <el-sub-menu v-if="userInfo.userId" index="">
              <template #title>
                <div class="header-user-box">
                  <!-- <img class="header-user-avatar" src=" '../../../assets/logo.png" alt="av" /> -->
                  {{ userInfo.userName }}
                </div>
              </template>
              <el-menu-item
                @click="router.push({ name: 'user' })"
                v-blur
                index="/user"
                >用户中心
              </el-menu-item>
              <el-menu-item
                @click="userInfo.logout()"
                v-blur
                index="user-logout"
                >注销</el-menu-item
              >
            </el-sub-menu>
            <!-- 点击前往用户中心之际判断用户是否登录 如果没有 -->
            <el-menu-item v-else @click="toUserCenter" v-blur index="/user"
              >用户中心
            </el-menu-item>
          </template>
          <!-- 当adminInfo的id不为0时显现快捷登录后台的按钮 -->
          <template v-if="adminInfo.userId">
            <el-sub-menu index="/admin">
              <template #title>
                <div
                  style="font-weight: 600; color: white"
                  class="header-user-box"
                >
                  设备管理平台
                </div>
              </template>
              <el-menu-item @click="beforePushAdmin" v-blur index="/admin"
                >快捷登录管理平台
              </el-menu-item>
              <!-- <el-menu-item
                @click="adminInfo.logout()"
                v-blur
                index="admin-logout"
                >注销</el-menu-item
              > -->
            </el-sub-menu>
          </template>
        </el-menu>
      </el-col>
    </el-row>
    <!-- 左侧的抽屉路由 -->
    <el-drawer
      custom-class="aside-drawer"
      v-model="memberCenter.state.menuExpand"
      :with-header="false"
      direction="ltr"
      size="50%"
    >
      <Aside />
    </el-drawer>
  </el-header>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
//引入用户中心自定义仓库
import { useMemberCenter } from "@/store/memberCenter";
import { useUserInfo } from "@/store/userInfo"; //用户中心信息仓库
import { useAdminInfo } from "@/store/adminInfo"; //管理平台信息仓库
import { useConfig } from "@/store/config";
import { Session } from "@/utils/storage";
import { BEFORE_RESIZE_LAYOUT } from "@/store/constant/cacheKey"; //获取上一次切换的布局

//引入aside组件 放抽屉里
import Aside from "../components/aside.vue";
// Element Plus 额外提供了一系列类名，用于在某些条件下隐藏元素。 这些类名可以添加在任何 DOM 元素或自定义组件上
import "element-plus/theme-chalk/display.css";

//左上角菜单抽屉图标颜色切换
defineProps<{ menuColor: string }>();
//菜单路由
const state = reactive({
  activeMenu: "",
});

const memberCenter = useMemberCenter();
const route = useRoute();
const router = useRouter();
const userInfo = useUserInfo();
const adminInfo = useAdminInfo();
const config = useConfig();

const emit = defineEmits(["on-click"]);
const toUserCenter = () => {
  emit("on-click");
};

//菜单路由切换
switch (route.name) {
  case "Home":
    state.activeMenu = "/";
    break;
  case "user":
    console.log(route.name);
    state.activeMenu = "/user";
    break;
}
const beforePushAdmin = () => {
  adminInfo.getAdminInfo().then(() => {
    // let defaultBeforeResizeLayout = {
    //   layoutMode:
    //     config.layout.layoutMode , //后台布局
    //   menuCollapse: config.layout.menuCollapse, //是否水平折叠收起菜单
    // };
    // let beforeResizeLayout = Session.get(BEFORE_RESIZE_LAYOUT); // 切换到上次布局方式
    // console.log(
    //   "布局问题!!!!!!!!!!!!",
    //   defaultBeforeResizeLayout,
    //   "上一次布局",
    //   beforeResizeLayout
    // );

    // if (!beforeResizeLayout)
    //   Session.set(BEFORE_RESIZE_LAYOUT, defaultBeforeResizeLayout);
    // let beforeResizeLayoutTemp =
    //   beforeResizeLayout || defaultBeforeResizeLayout;
    // config.setLayout("menuCollapse", beforeResizeLayoutTemp.menuCollapse);
    // config.setLayoutMode(beforeResizeLayoutTemp.layoutMode);
    router.push({ name: "admin" });
  });
};
//菜单激活回调
const handleSelect = () => {};
onMounted(() => {});
</script>
<style lang="scss" scoped>
.mColor {
  color: white;
  transition: 1.8s ease-in-out;

  &:hover {
    background-color: transparent;
    color: gray;
    transition: 0.1s ease-in-out;
  }
}

.bColor {
  color: gray;
  transition: 1.8s ease-in-out;

  &:hover {
    background-color: transparent;
    color: rgb(222, 222, 162);
    transition: 0.1s ease-in-out;
  }
}

.frontIndex {
  // background-color: transparent !important;
  background-color: #ffffff;
  box-shadow: 0 0 8px rgba(0 0 0 / 8%);
}

.el-header {
  padding: 0;
}

.header-row {
  display: flex;
}

.user-menus-expand {
  display: flex;
  height: 60px;
  align-items: center;
  justify-content: center;
}

.header-logo {
  display: flex;
  height: 60px;
  align-items: center;
  cursor: pointer;

  img {
    height: 34px;
    width: 34px;
  }

  span {
    padding-left: 4px;
    font-size: var(--el-font-size-large);
  }
}

.switch-language {
  display: flex;
  align-items: center;

  span {
    padding-right: 4px;
  }
}

.el-menu--horizontal {
  margin-left: auto;
  border-bottom: none;
}

.header-user-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-user-avatar {
  width: 16px;
  height: 16px;
  margin-right: 4px;
  border-radius: 50%;
}

.el-menu--horizontal > .el-menu-item,
.el-menu--horizontal > :deep(.el-sub-menu) .el-sub-menu__title,
.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: none;
}

:deep(.aside-drawer) {
  .el-drawer__body {
    padding: 0;
  }
}

@media only screen and (max-width: 768px) {
  .header-logo {
    padding-left: 10px;
  }

  .user-menus-expand {
    padding-left: 20px;
  }
}

@media screen and (max-width: 425px) {
  :deep(.aside-drawer) {
    width: 70% !important;
  }
}

.theme-switch {
  --el-menu-hover-bg-color: none;
}

@at-root .dark {
  .header-logo {
    .hidden-xs-only {
      color: var(--el-text-color-primary);
    }
  }
}
</style>
